<template>
  <div>
    <div class="header">
      <button @click="getRegister">Add Worker Node</button>
      <span v-if="registerUrl">URL: {{ registerUrl }} Timeout: {{ timeout }}</span>
    </div>
    <worker-node-list @show-job="showJobCenter" />
  </div>
</template>

<script>
import { getRegisterUrl } from '../api';
import WorkerNodeList from './WorkerNodeList.vue';

export default {
  props: ['envId'],
  components: { WorkerNodeList },
  data() {
    return {
      registerUrl: '',
      timeout: '',
    };
  },
  methods: {
    async getRegister() {
      const res = await getRegisterUrl();
      this.registerUrl = res.data.url;
      this.timeout = res.data.timeout;
    },
    showJobCenter(workerId) {
      this.$emit('update:worker-id', workerId);
      this.$emit('update:component', 'JobCenter');
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
</style>
